<template>
  <div ref="visit_app" class="visit-app" style="width: 100%; height: 85%"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";

export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.visit_app, this.theme);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        grid: {
          top: "2%",
          left: "50%",
          righ: "50%",
          bottom: "3%",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            // selectedMode: 'single',
            radius: ["35%", "60%"],

            labelLine: {
              length: 70,
              length2: 50,

              lineStyle: {
                color: "rgba(255,255,255,0.8)",
              },
            },
            label: {
              formatter: "{b|{b}}{abg|} \n{hr|}\n  {per|{d}%}  ",
              distanceToLabelLine: -50,

                color: "rgba(255,255,255,0.8)",
              rich: {
                a: {
                  color: "#6E7079",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#8C8D8E",
                  width: "100%",
                  height: 0,
                  align: "center",
                },
                b: {
                  color: "rgba(256,256,256,0.8)",
                  fontSize: 10,
                  fontWeight: "bold",
                  lineHeight: 33,
                  align: "center",
                },
                per: {
                  color: "rgba(256,256,256,0.8)",

                  padding: [3, 4],
                  borderRadius: 4,
                  align: "center",
                },
              },
            },
            data: [
              { value: 1548, name: "部门1" },
              { value: 775, name: "部门2" },
              { value: 679, name: "部门3", selected: true },
            ],
          },
          {
            name: "Access From",
            type: "pie",
            radius: ["65%", "100%"],

            labelLine: {
              show: false,
            },
            label: {
              position: "inner",
              fontSize: 10,

              color: "rgba(255,255,255,0.8)",

            },
            data: [
              { value: 1048, name: "部门一" },
              { value: 335, name: "部门二" },
              { value: 310, name: "部门三" },
              { value: 251, name: "部门四" },
              { value: 234, name: "部门五" },
              { value: 147, name: "部门六" },
              { value: 135, name: "部门七" },
              { value: 102, name: "部门八" },
            ],
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
  },
  mounted() {
    this.initChart();
    // 添加随页面变化而变化
    window.addEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose();
      this.initChart();
    },
  },
};
</script>

<style lang="scss" scoped>
.visit-app {
  width: 100%;
  height: 85%;
}
</style>